import {useModel} from '@@/exports';
import {PlusOutlined} from '@ant-design/icons';
import type {ActionType, ProColumns} from '@ant-design/pro-components';
import {ProTable} from '@ant-design/pro-components';
import {Button, message, Popconfirm, Select} from 'antd';
import React, {useRef, useState} from 'react';
import {deleteDisplayStepUsingDELETE, listDisplayStepUsingGET} from "@/services/model/displayStepController";
import AddOrEditModel from "@/pages/DisplayStep/component/AddOrEditModel";

const Attendance: React.FC = () => {
  const {initialState} = useModel('@@initialState');
  const actionRef = useRef<ActionType>();
  const [selectProductionLineValue, setSelectProductionLineValue] = useState('');
  const [selectKeyStepValue, setSelectKeyStepValue] = useState<string[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [saveType, setSaveType] = useState('');
  const initDisplayStep = async () => {
    const result = await listDisplayStepUsingGET({
      currentUserId: initialState?.currentUser?.id,
    });
    return {
      data: result.data
    };
  }

  const onDelete = async (workLineCode: string) => {
    const result = await deleteDisplayStepUsingDELETE({
      workLineCode,
    });
    if (result.code === 0 && result.data) {
      message.success('删除成功');
      actionRef.current?.reload();
    } else {
      message.warning(result.message);
    }
  };

  const proColumns: ProColumns<API.DisplayStepDto>[] = [
    {
      title: '序号',
      key: 'index',
      render: (dom, entity, index) => (
        index + 1
      ),
    },
    {
      title: '产线编码',
      key: 'workLineCode',
      dataIndex: 'workLineCode',
      valueType: 'text'
    },
    {
      title: '产线名称',
      key: 'workLineName',
      dataIndex: 'workLineName',
      valueType: 'text'
    },
    {
      title: '工序1',
      key: 'step1Name',
      dataIndex: 'step1Name',
      valueType: 'text',
    },
    {
      title: '工序2',
      key: 'step2Name',
      dataIndex: 'step2Name',
      valueType: 'text',
    },
    {
      title: '工序3',
      key: 'step3Name',
      dataIndex: 'step3Name',
      valueType: 'text',
    },
    {
      title: '工序4',
      key: 'step4Name',
      dataIndex: 'step4Name',
      valueType: 'text',
    },
    {
      title: '工序5',
      key: 'step5Name',
      dataIndex: 'step5Name',
      valueType: 'text',
    },
    {
      title: '工序6',
      key: 'step6Name',
      dataIndex: 'step6Name',
      valueType: 'text',
    },
    {
      title: '工序7',
      key: 'step7Name',
      dataIndex: 'step7Name',
      valueType: 'text',
    },
    {
      title: '工序8',
      key: 'step8Name',
      dataIndex: 'step8Name',
      valueType: 'text',
    },
    {
      title: '工序9',
      key: 'step9Name',
      dataIndex: 'step9Name',
      valueType: 'text',
    },
    {
      title: '工序10',
      key: 'step10Name',
      dataIndex: 'step10Name',
      valueType: 'text',
    },
    {
      title: '工序11',
      key: 'step11Name',
      dataIndex: 'step11Name',
      valueType: 'text',
    },
    {
      title: '工序12',
      key: 'step12Name',
      dataIndex: 'step12Name',
      valueType: 'text',
    },
    {
      title: '操作',
      valueType: 'option',
      render: (text, record) => [
        <a
          key="editable"
          onClick={() => {
            setSelectKeyStepValue((prevState) => {
              prevState[0] = record.step1Code ? record.step1Code : '';
              prevState[1] = record.step2Code ? record.step2Code : '';
              prevState[2] = record.step3Code ? record.step3Code : '';
              prevState[3] = record.step4Code ? record.step4Code : '';
              prevState[4] = record.step5Code ? record.step5Code : '';
              prevState[5] = record.step6Code ? record.step6Code : '';
              prevState[6] = record.step7Code ? record.step7Code : '';
              prevState[7] = record.step8Code ? record.step8Code : '';
              prevState[8] = record.step9Code ? record.step9Code : '';
              prevState[9] = record.step10Code ? record.step10Code : '';
              prevState[10] = record.step11Code ? record.step11Code : '';
              prevState[11] = record.step12Code ? record.step12Code : '';
              return prevState;
            });
            if (record.workLineCode) {
              setSelectProductionLineValue(record.workLineCode);
            }
            setIsModalOpen(true);
            setSaveType('edit')
          }}
        >
          编辑
        </a>,
        <Popconfirm
          key={'onDelete'}
          title="你想要删除这条数据吗"
          onConfirm={() => {
            if (record.workLineCode) {
              onDelete(record.workLineCode);
            }
          }}
          okText="Yes"
          cancelText="No"
        >
          <a key="deletable">删除</a>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <div>
      <div style={{display: "flex", justifyContent: "space-between", marginBottom: '5px'}}>
        <Button
          type="primary"
          onClick={() => {
            setSelectProductionLineValue('');
            setSelectKeyStepValue([])
            setSaveType('save')
            setIsModalOpen(true);
          }}
          icon={<PlusOutlined/>}
        >
          新增 线别与工序
        </Button>
      </div>

      <ProTable<API.DisplayStepDto>
        rowKey="workLineCode"
        actionRef={actionRef}
        headerTitle="线别与工序表格"
        columns={proColumns}
        scroll={{x: 1400,y: 'calc(100vh - 205px)'}}
        search={false}
        pagination={false}
        request={() => initDisplayStep()}
      />

      <AddOrEditModel saveType={saveType}
                      isModalOpen={isModalOpen}
                      initProductionLineValue={selectProductionLineValue}
                      initKeyStepValue={selectKeyStepValue}
                      onCancel={() => setIsModalOpen(false)}
                      actionRef={actionRef}/>
    </div>
  );
};

export default Attendance;
